<template>
  <div>
<ol v-for="item in list">
  <!-- 姓名 -->
  <p>姓名：{{item.name}}</p>
  <!-- 年龄 -->
  <p>年龄：{{item.age}}</p>
  <br>
</ol>
<br>
<table>
  <tr>
    <td>用户借款编号</td>
    <td>借款用户账号</td>
    <td>借款款项名称</td>
    <td>借款金额</td>
    <td>剩余还款本金</td>
  </tr>
  <tr v-for="item in lists">
    <td>{{item.a}}</td><!-- 用户借款编号 -->
    <td>{{item.b}}</td><!-- 借款用户账号 -->
    <td>{{item.c}}</td><!-- 借款款项名称 -->
    <td>{{item.d}}</td><!-- 借款金额 -->
    <td>{{item.e}}</td><!-- 剩余还款本金 -->
  </tr>
</table>
<br>
<!-- 双向绑定的演示 -->
<input type="text" v-model="str">
<br>
{{ str }}
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'

let data=reactive({
  // 循环输出数组信息
  list:[
    {
      name:'张大',
      age:'21'
    },
    {
      name:'李尔',
      age:'20'
    },
    {
      name:'刘珊',
      age:'22'
    },
    {
      name:'钱嗣',
      age:'25'
    },
    {
      name:'赵武',
      age:'24'
    }
  ],
  // 循环输出数组内的信息
  lists:[
    {
      a:'1',b:'zhangsan',c:'八维助学金',d:'400',e:'0'
    },
    {
      a:'2',b:'zhangsan',c:'八维助学金',d:'10000',e:'10000'
    }
  ],
  // 双向绑定演示
  str:"双向绑定演示"
})

let {list,lists,str}=toRefs(data)
</script>

<style scoped>

</style>